<template>
  <!-- 咨讯详情 -->
  <div class="informationListBox">
    <swiper :list="goodsImgList" :auto="true" :interval="3000" class="bannerBox"></swiper>
    <!-- 课程资讯展示 -->
    <div v-for="(item,index) in infoList" :key="index" class="info">
      <div class="infoLeft">
        <div class="infoLeft-title">{{item.title}}</div>
        <div class="infoLeft-bottom">
          <div class="infoTime">
            <!-- <image src='../../images/tick.png'></image> -->
            <div class="iconfont icon-shijian"></div>
            {{item.time}}
          </div>
          <div class="infoTagBox">
            <div v-for="item2 in item.tagList" class="infoTag">{{item2}}</div>
          </div>
        </div>
      </div>
      <div class="infoRight">
        <img src="../assets/images/consult124.png" />
      </div>
    </div>
  </div>
</template>

<script>
import {  Swiper } from "vux";
export default {
 components: {
    Swiper,
  },
  data() {
    return {
        goodsImgList: [
        {
          url: 'javascript:',
          img: 'https://ww1.sinaimg.cn/large/663d3650gy1fq66vvsr72j20p00gogo2.jpg',
        },
        {
          url: 'javascript:',
          img: 'https://ww1.sinaimg.cn/large/663d3650gy1fq66vw1k2wj20p00goq7n.jpg',
        },
        {
          url: 'javascript:',
          img: 'https://ww1.sinaimg.cn/large/663d3650gy1fq66vw50iwj20ff0aaaci.jpg', // 404
        }
      ],
      infoList: [
        {
          img: require('../assets/images/consult124.png'),
          title: '零基础直达大学六级：内容内容内容内容内容内容容内容容内容容内容',
          time: '12小时前',
          tagList: ['零基础', '大学六级']
        },
        {
          img: require('../assets/images/consult124.png'),
          title: '零基础直达大学六级：内容内容内容内容内容内容容内容容内容容内容',
          time: '20小时前',
          tagList: ['大学六级']
        },
        {
          img: require('../assets/images/consult124.png'),
          title: '零基础直达大学六级：内容内容内容内容内容内容容内容容内容容内容',
          time: '18小时前',
          tagList: ['零基础']
        },
      ]
    }
  },
}
</script>

<style lang="less" scoped>
.informationListBox {
  .bannerBox {
    margin: 20px 20px;
    border-radius: 20px;
    /deep/.vux-img {
      border-radius: 20px;
    }
  }
  .info {
    /* background-color:rgba(243, 63, 72, 0.932); */
    padding: 20px;
    height: 100%;
    border-bottom: #f6f6f7 solid 2px;
    display: flex;
    .infoLeft {
      flex-grow: 1;
      padding-right: 30px;
    }
    .infoLeft-title {
      font-size: 35px;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
    }
    .infoLeft-bottom {
      margin-top: 24px;
      display: flex;
      align-items: center;
      font-size: 26px;
      justify-content: space-between;
    }
    .infoTime {
      display: flex;
      align-items: center;
      color: #b4b4b4;
    }
    .infoTime .iconfont {
      margin-right: 8px;
    }
    .infoTagBox {
      display: flex;
    }
    .infoTag {
      color: #67aff8;
      background-color: #e1effe;
      padding: 4px 10px;
      border-radius: 20px;
      margin: 0 10px;
    }

    .infoRight {
      width: 240px;
      height: 180px;
      flex-shrink: 0;
      align-items: center;
    }
    .infoRight img {
      width: 100%;
      height: 100%;
    }
  }
}
</style>